<section class="content-header">
    <h1>
        CSS生产监控
        <small> {{dateTime|date:"yyyy-MM-dd HH:mm:ss"}}</small>
    </h1>
</section>
<section class="content">
    <!-- <div class="row">
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-aqua">
                <div class="inner">
                    <h3>150</h3>
                    <p>计划产量</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>53<sup style="font-size: 20px">%</sup></h3>

                    <p>实际产量</p>
                </div>
                <div class="icon">
                    <i class="ion ion-stats-bars"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6">
            <div class="small-box bg-yellow">
                <div class="inner">
                    <h3>44</h3>
                    <p>停线时间</p>
                </div>
                <div class="icon">
                    <i class="ion ion-person-add"></i>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-xs-6 ">
            <i class="fa fa-plus text-green pull-right" style="font-size:100px"></i>
        </div>
    </div> -->
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-12">
                    <div *ngFor="let hero of heroes" class="col-lg-6">
                        <div class="box box-widget widget-user">
                            <div class="widget-user-header bg-aqua-active">
                                <h3>{{hero.fullName}}</h3>
                                <div class="pull-right">
                                        <h5 >{{hero.shiftDay}} -- {{hero.shiftName}}</h5>
                                </div>
                               
                            </div>
                            <!-- <div class="widget-user-image">
                                <img class="img-circle" src="../dist/img/user1-128x128.jpg" alt="User Avatar">
                            </div> -->
                            <div class="box-footer">
                                <div class="row">
                                    <div class="col-sm-4 border-right">
                                        <div class="description-block">
                                            <h5 class="description-header">200</h5>
                                            <span class="description-text">上线产量</span>
                                        </div>

                                    </div>
                                    <div class="col-sm-4 border-right">
                                        <div class="description-block">
                                            <h5 class="description-header">60</h5>
                                            <span class="description-text">下线产量</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="description-block">
                                            <h5 class="description-header">35%</h5>
                                            <span class="description-text">完成率</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="box box-success ">
                        <div class="box-header with-border">
                            <div class="pull-right">

                            </div>
                            <i class="fa fa-map-marker"></i>

                            <h3 class="box-title">
                                车间布局
                            </h3>
                        </div>
                        <div class="box-body">


                        </div>
                    </div> -->
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="box box-widget widget-user-2">
                        <div class="widget-user-header bg-aqua">

                            <div class="widget-user-image">
                                <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar">
                            </div>
                            <h3 class="widget-user-username">呼叫</h3>
                            <h5 class="widget-user-desc">Lead Developer</h5>
                        </div>
                        <div class="box-footer no-padding">
                            <ul class="nav nav-stacked">
                                <li><a href="#">020M__ <span class="pull-right badge bg-green">31</span></a></li>
                                <li><a href="#">030M__ <span class="pull-right badge bg-green">5</span></a></li>
                                <li><a href="#">040A1_ <span class="pull-right badge bg-green">12</span></a></li>
                                <li><a href="#">060M__ <span class="pull-right badge bg-green">842</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box box-widget widget-user-2">
                        <div class="widget-user-header bg-red">
                            <div class="widget-user-image">
                                <img class="img-circle" src="../dist/img/user7-128x128.jpg" alt="User Avatar">
                            </div>
                            <h3 class="widget-user-username">报警</h3>
                            <h5 class="widget-user-desc">Lead Developer</h5>
                        </div>
                        <div class="box-footer no-padding">
                            <ul class="nav nav-stacked">
                                <li><a href="#">020M__ <span class="pull-right badge bg-red">31</span></a></li>
                                <li><a href="#">030M__ <span class="pull-right badge bg-red">5</span></a></li>
                                <li><a href="#">040A1_ <span class="pull-right badge bg-red">12</span></a></li>
                                <li><a href="#">060M__ <span class="pull-right badge bg-red">842</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h3>150</h3>
                                    <p>上线产量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3>100</h3>

                                    <p>下线产量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="small-box bg-yellow">
                                <div class="inner">
                                    <h3>66<sup style="font-size: 20px">%</sup></h3>
                                    <p>产量完成率</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box box-widget box-solid">
                        <div class="box-header">
                            <!-- <div class="pull-right">
                                2018-07-06 早班
                            </div> -->
                            <i class="fa fa-map-marker"></i>
                            <h3 class="box-title">
                                当班小时产量
                            </h3>
                        </div>
                        <div class="box-body">
                            <div echarts [options]="prodCountChartOption" [loading]="showloading" (chartInit)="onChartInit(1,$event)" class="demo-chart"
                                style="height:300px;"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs pull-right">
                            <li><a href="#sales-chart1" data-toggle="tab">CycleTime</a></li>
                            <li><a href="#sales-chart" data-toggle="tab">堵料</a></li>
                            <li class="active"><a href="#revenue-chart" data-toggle="tab">待料</a></li>
                            <li class="pull-left header"><i class="fa fa-inbox"></i> TOP10</li>
                        </ul>
                        <div class="tab-content no-padding">
                            <div class="chart tab-pane active" id="revenue-chart" style="position: relative; ">
                                <div echarts [options]="stChartOption" [loading]="showloading" (chartInit)="onChartInit(2,$event)" class="demo-chart" style="height:300px;"></div>
                            </div>
                            <div class="chart tab-pane" id="sales-chart" style="position: relative;">
                                <div echarts [options]="btChartOption" [loading]="showloading" (chartInit)="onChartInit(3,$event)" class="demo-chart" style="height:300px;"></div>
                            </div>
                            <div class="chart tab-pane" id="sales-chart1" style="position: relative;">
                                <div echarts [options]="ctChartOption" [loading]="showloading" (chartInit)="onChartInit(4,$event)" class="demo-chart" style="height:300px;"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>